<template>
  <x-drawer v-model:visible="drawerVisible" :title="title" closable @update:show="onUpdateShow">
    <n-spin :show="loading" style="min-height: 300px">
      <n-tree
        v-if="treeOptions"
        :default-checked-keys="value"
        :data="treeOptions"
        block-line
        cascade
        checkable
        default-expand-all
        check-strategy="child"
        @update:checked-keys="handleCheckedKeys"
      />
    </n-spin>

    <template v-if="treeOptions" #footer>
      <x-button @click="handleCancel">取消</x-button>
      <x-button type="primary" @click="handleConfirm">确定</x-button>
    </template>
  </x-drawer>
</template>

<script lang="ts">
  import { defineComponent, reactive, toRefs, watch } from 'vue'
  import { NTree, NSpin } from 'naive-ui'
  import { XDrawer } from '../x-drawer'
  import { XButton } from '../x-button'
  import { useStore } from '@/store'

  export default defineComponent({
    name: 'XStaffMp',
    components: {
      NTree,
      NSpin,
      XButton,
      XDrawer
    },
    props: {
      title: {
        type: String,
        default: '设置接待'
      },
      visible: {
        type: Boolean,
        default: false
      },
      value: {
        type: Array,
        default: () => []
      }
    },
    emits: ['update:visible', 'update:value'],
    setup($props, { emit: $emit }) {
      const $store = useStore()
      const $state: any = reactive({
        ...toRefs($props),
        checkedKeys: [],
        drawerVisible: $props.visible,
        loading: false,
        treeOptions: null
      })

      // watch
      watch(
        () => $props.visible,
        (value: boolean) => {
          $state.drawerVisible = value
          if (value && !$state.treeOptions) {
            getStaffData()
          }
          if (value) {
            $state.checkedKeys = $state.value
          }
        }
      )

      // 加载部门、员工数据
      const getStaffData = () => {
        if ($state.loading) return false
        $state.loading = true
        $store
          .dispatch('service/serviceDepartmentList')
          .then(async (res) => {
            const options: any = []
            const list = res.data || []
            const len = list.length
            for (let i = 0; i < len; i++) {
              const department = list[i]
              const children = await getStaffInfo(department.id)
              if (children.length) {
                options.push({
                  ...department,
                  label: department.name,
                  key: department.id,
                  children
                })
              }
            }
            $state.loading = false
            $state.treeOptions = options
          })
          .catch(() => {
            $state.loading = false
          })
      }

      // 单独获取部门下
      const getStaffInfo = async (id: number) => {
        const { data } = await $store.dispatch('service/serviceDepartmentUserList', {
          departmentId: id
        })
        const list = data || []
        return list.map((item: { name: string; userid: string }) => {
          return {
            ...item,
            label: item.name,
            key: item.userid
          }
        })
      }

      // 抽屉显示状态改变时执行的回调函数
      const onUpdateShow = (show: boolean) => {
        $emit('update:visible', show)
      }

      // 更新选中值
      const handleCheckedKeys = (res: Array<string | number>) => {
        $state.checkedKeys = res
      }

      // 取消选择
      const handleCancel = () => {
        $state.drawerVisible = false
        onUpdateShow(false)
      }

      // 确定选择
      const handleConfirm = () => {
        $emit('update:value', $state.checkedKeys)
      }

      return {
        ...toRefs($state),
        onUpdateShow,
        handleCancel,
        handleConfirm,
        handleCheckedKeys
      }
    }
  })
</script>

<style></style>
